<template>
  <!-- k1q94wz8y6gen4xwo41qo0llopujpxe0heo8a9ceya6s16uc -->
  <div class="container">
    <div class="search" v-if="searchShow">
      <el-form
        :inline="true"
        :model="search"
        ref="search"
        class="demo-form-inline"
      >
        <el-form-item label="公告内容" prop="title">
          <el-input
            v-model="search.title"
            placeholder="请输入公告内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="search.status" placeholder="请输入状态">
            <el-option label="公布" :value="1"></el-option>
            <el-option label="撤销" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶" prop="isTop">
          <el-select v-model="search.isTop" placeholder="请输入是否置顶">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sear">搜索</el-button>
          <el-button type="primary" @click="searClear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btns">
      <div class="left">
        <el-button type="primary" @click="add">新增</el-button>
      </div>
      <div class="right">
        <el-button icon="el-icon-search" circle @click="searchSh"></el-button>
        <el-button icon="el-icon-refresh" circle @click="getData"></el-button>
      </div>
    </div>
    <div class="table">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="" type="index" label="序号" width="">
        </el-table-column>
        <el-table-column prop="title" label="公告内容" width="">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">公布</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 0">撤销</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isTop" label="是否置顶">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isTop == 1">是</el-tag>
            <el-tag type="danger" v-if="scope.row.isTop == 0">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button type="primary" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="dialog">
      <el-dialog
        title="修改"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="dialogForm"
          :rules="rulesDialog"
          ref="dialogForm"
          label-width="100px"
          class="demo-dialogForm"
        >
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="dialogForm.title"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="dialogForm.status">
              <el-radio v-model="dialogForm.status" :label="1">公布</el-radio>
              <el-radio v-model="dialogForm.status" :label="0">撤销</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="置顶" prop="isTop">
            <el-radio-group v-model="dialogForm.isTop">
              <el-radio v-model="dialogForm.isTop" :label="1">是</el-radio>
              <el-radio v-model="dialogForm.isTop" :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <!-- <el-input v-model="dialogForm.content"></el-input> -->
            <editor
              api-key="k1q94wz8y6gen4xwo41qo0llopujpxe0heo8a9ceya6s16uc"
              v-model="dialogForm.content"
              :init="{
                plugins: 'lists link image paste help wordcount',
                toolbar:
                  'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist',
              }"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="editTrue"
            v-if="dialogFormSta == 'edit'"
            >确 定</el-button
          >
          <el-button
            type="primary"
            @click="addTrue"
            v-if="dialogFormSta == 'add'"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import { getData, edit, editTrue, del, add } from "../../../api/notice";

import Editor from "@tinymce/tinymce-vue";
export default {
  data() {
    return {
      //搜索显示
      searchShow: true,
      //表格加载状态
      loading: false,
      // 表单状态
      dialogFormSta: "",
      //对话框表单
      dialogForm: {},
      rulesDialog: {},
      //控制对话框
      dialogVisible: false,
      //分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      //表格数据
      tableData: [],
      // 搜索数据
      search: {
        t: "",
        current: "",
        size: "",
        title: "",
        status: "",
        isTop: "",
      },
    };
  },
  components: {
    editor: Editor, // <- Important part
  },
  methods: {
    searchSh() {
      this.searchShow = !this.searchShow;
    },
    //重置搜索表单
    searClear() {
      this.$refs["search"].resetFields();
    },
    //搜索
    sear() {
      this.search.t = Date.now();
      this.search.current = this.pageNumber;
      this.search.size = this.pageSize;
      getData(this.search).then((res) => {
        // console.log(res, "res");
        this.tableData = res.data.records;
      });
    },
    //增加确认
    addTrue() {
      let data = {
        ...this.dialogForm,
        t: Date.now(),
      };
      add(data).then((res) => {
        console.log(res, "res");
        this.getData();
      });
    },
    //增加
    add() {
      this.dialogForm = {
        content: "",
        id: "",
        isTop: "",
        status: "",
        t: "",
        title: "",
        url: "",
      };
      this.dialogVisible = true;
      this.dialogFormSta = "add";
    },
    //删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let data = {
            t: Date.now(),
          };
          del(id, data).then((res) => {
            console.log(res, "res");
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑确定
    editTrue() {
      let data = {
        ...this.dialogForm,
        t: Date.now(),
      };
      editTrue(data).then((res) => {
        console.log(res, "res");
        this.getData();
        this.dialogVisible = false;
      });
    },
    //关闭对话框
    handleClose(done) {
      done();
    },
    //修改
    edit(id) {
      // console.log(id, "id");
      this.dialogVisible = true;
      this.dialogFormSta = "edit";
      let date = Date.now();
      edit(id, date).then((res) => {
        // console.log(res, "res");
        this.dialogForm = res.data;
        console.log(this.dialogForm, "dialogForm");
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getData();
    },
    // 初始化表格数据
    getData() {
      let date = Date.now();
      let data = {
        t: date,
        current: 1,
        size: 10,
      };
      this.loading = true;
      getData(data).then((res) => {
        // console.log(res, "res");
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container::v-deep {
  // .tox-tinymce {
  //   z-index: 99999;
  // }
  padding: 20px;
  .btns {
    display: flex;
    justify-content: space-between;
  }
}
</style>